<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content=""/>
    <style type="text/css">
		#box{
			width: 350px;
			height: 350px;
			position: relative;
			float: left;
			border: 1px solid red;
		}
		#box .pic{
			width: 350px;
			height: 350px;
			position: relative;
		}
		#box .fdj{
			display: none;
			width: 175px;
			height: 175px;
			position: absolute;
			opacity: 0.6;
			filter: alpha(opacity=60);
			background-color: orange;
			top: 0;
			left: 0;
		}
		#right{
			display: none;
			width: 400px;
			height: 400px;
			border: 1px solid orange;
			float: left;
			position: relative;
			overflow: hidden;
		}
		#right .rpic{

			position: absolute;
			top: 0;
			left: 0;
		}
		#box .boxm{
			width: 350px;
			height: 350px;
			position: absolute;
			top: 0;
			left: 0;
			background-color: red;
			opacity: 0;
			filter: alpha(opacity=0);
		}
    </style>
    <script type="text/javascript">
  		window.onload=function(){
  			var box = document.getElementById('box');
	  		var fdj = document.getElementsByClassName('fdj')[0];
	  		var rpic = document.getElementsByClassName('rpic')[0];
	  		var right = document.getElementById('right');
	  		var boxm = document.getElementsByClassName('boxm')[0];

	  		boxm.onmousemove = function(e){
  				var ev = window.event || e;
  				var mouse_left = ev.layerX || ev.offsetX;
				var mouse_top = ev.layerY || ev.offsetY;

				fdj.style.display = "block";
  				right.style.display = "block";

				new_top = mouse_top-175/2;
				new_left = mouse_left-175/2;

				if(new_top<0)new_top=0;
				if (new_top>175)new_top=175;
				if(new_left<0)new_left=0;
				if(new_left>175)new_left=175;

				fdj.style.top = new_top+"px";
				fdj.style.left = new_left+"px";

				rpic.style.top = new_top/7*8*-2+"px";
				rpic.style.left = new_left/7*8*-2+"px";
  			}
  			boxm.onmouseout=function(){
  				fdj.style.display = "none";
  				right.style.display = "none";
  			}
  		}
    </script>
    <title>放大镜</title>
  </head>

 <body>
	<div id="box">
		<img src="images/350.jpg" alt="" class="pic" />
		<div class="fdj"></div>
		<div class="boxm"></div>
	</div>
	<div id="right">
		<img src="images/800.jpg" alt="" class="rpic" />
	</div>
 </body>
</html>